<template>
  <el-dialog
    title="预览文章"
    :visible.sync="artPreDiao"
    width="800px"
    :before-close="cancel">
    <div class="artContent">
      <!-- 标题 -->
      <h2>{{ artData.title }}</h2>
      <!-- 文章信息 -->
      <div>
        <span>{{ formatTime(artData.createTime) }}</span>
        <span>{{ artData.username }}</span>
        <i class="el-icon-view"></i>
        <span>{{ artData.visits }}</span>
      </div>
      <!-- 文章主体 -->
      <div v-html="artData.articleBody" class="artBody">
      </div>
    </div>
  </el-dialog>
</template>

<script>
// 时间格式化插件
import moment from 'moment'

export default {
  name: 'ArticlePre',
  props: ['artPreDiao', 'artData'],
  data () {
    return {
      // 文章数据
    }
  },
  methods: {
    // 关闭弹层方法
    cancel () {
      this.$emit('update:artPreDiao', false)
    },
    // 格式化时间
    formatTime (time) {
      const res = new Date(time)
      return moment(res).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.artContent{
  span{
    margin: 0 5px;
  }
  i{
    margin: 0 5px;
  }
  .artBody{
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    background-color: #f5f5f5;
    padding: 10px;
    margin-top: 10px;
  }
}
</style>
